<template>
  <div class="img-loader">
    <div class="img-container">
      <div class="itemImg" v-for="(url,index) in picList" :key="index">
        <img :src="url" class="img"/>
        <svg class="icon" aria-hidden="true" @click="deletePic(index)">
          <use xlink:href="#icon-qx1"></use>
        </svg>
      </div>
      <div class="btn-add">
        <van-uploader
          :after-read="addPic"
          accept="image/*"
          :oversize="upNoFile"
        >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dd_pj"></use>
          </svg>
          <span v-text="getTxt"></span>
        </van-uploader>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import BtnAddImg from './BtnAddImg';
  import {Toast} from 'vant';
  import ImgCompressor from '../../util/ImgCompressor';

  export default {
    name: 'img-uploader',

    data() {
      return {
        picList: []
      };
    },
    props: {
      maxPicNum: {
        required: true,
        type: String,
        default: -1
      },
      index: {
        required: true,
        type: Number
      }
    },

    components: {BtnAddImg},
    computed: {
      getTxt() {
        if (parseInt(this.maxPicNum) > 0) {
          return '最多选' + this.maxPicNum + '张';
        } else {
          return '';
        }
      }
    },
    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      addPic(img) {
        if (this.canPushMore()) {
          this.$emit('beforeLoad');
          ImgCompressor.compress(img.content, (imgEncode) => {
            this.picList.push(imgEncode);
            this.$Spread.upLoadImg({img: img.content, dir: 'comment'})
              .then((res) => {
                // this.img.push(res.data.url);
                this.$emit('afterLoad', res.data.url, this.index);
                this.loading = false;
              }, () => {
                this.loading = false;
              });
          });
        } else {
          Toast('最多选' + this.maxPicNum + '张');
        }
      },
      deletePic(index) {
        this.picList.splice(index, 1);
        this.$emit('getPics', index, this.index);
      },
      canPushMore() {
        if (this.maxPicNum < 0) {
          return true;
        } else {
          return this.picList.length < this.maxPicNum;
        }
      },
      upNoFile() {
        alert('上传图片过大');
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .img-loader {
    box-sizing border-box
    background white
    .img-container {
      flex-x()
      justify-content flex-start
      flex-wrap wrap
      box-sizing border-box
      .itemImg {
        width: vw(60)
        height: vw(60)
        position relative
        margin-right: 3vw;
        img {
          width: 100%
          height: 100%
          border-radius(3px);
        }
        .icon {
          width: 4vw;
          height: 4vw;
          position: absolute;
          top: -1.5vw;
          right: -1.5vw;
          fill: #666;
        }
      }
      .btn-add {
        width: vw(60)
        height: vw(60)
        background-color: bk-color
        word-vw(10, third-ash)
        flex-center()
        border-radius(3px);
        .van-uploader {
          flex-y(center, center)
          .icon {
            width: vw(32)
            height: vw(24)
            fill: #B5B5B5
            margin-bottom 1vw
          }
        }
      }
    }
  }
</style>
